<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Etcd Workbench</title>
    <style>
        :root{
            --logo-width:80px;
        }
        body {
            //background-color: #fafafa;
        }
        .container {
            display: flex;
            align-content: center;
            justify-content: center;
        }
        .logo, .logo-img {
            width: var(--logo-width);
            height: var(--logo-width);
            user-select: none;
            pointer-events: none;
        }
        .loading {
            color: #688594;
            font-size: 20px;
            line-height: var(--logo-width);
            margin-left: 10px;
            animation: infinite linear blink 1.5s;
            cursor: default;
            user-select: none;
        }

        @keyframes blink {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
    </style>
</head>
<body data-tauri-drag-region>
    <div class="container" data-tauri-drag-region>
        <span class="logo" data-tauri-drag-region>
            <img src="/logo.png" alt="logo" class="logo-img">
        </span>
        <span class="loading" data-tauri-drag-region>Workbench Loading...</span>
    </div>
</body>
<script>
    const disableWebviewNativeEvents = () => {
        if (window.location.hostname !== "tauri.localhost") {
            return
        }

        document.addEventListener('keydown', e => {
            e.preventDefault()
        }, {capture: true})

        document.addEventListener('contextmenu', e => {
            e.preventDefault()
        }, {capture: true})
    }
    disableWebviewNativeEvents()
</script>
</html>